<template>
    <view class="page100v flex-column bg-gray">

        <view class="setting-area">
            <view class="fs30 mr20" @click="settingClick">设置</view>
        </view>
        <view class="login-area">
            <u-icon width="100" height="100"  name="/static/login/logo.png"></u-icon>
            <view class="login-title fs40 mt30">急诊移动护理</view>
            <view class="login-title fs25 mt20">瑞安市人民医院</view>
        </view>

        <view class="login-input-area">
            <view class="fs40 fc-black mt20">登录</view>

            <view class="login-input-item">
                <view class="fs30 mr20">租户</view>
                <u--input
                    placeholder="请输入租户"
                    v-model="loginUser.tenantId"
                    :clearable="true"
                    @blur="loginInfochange"
                    customStyle="background-color: rgba(242,243,247,0.77);border-radius: 20rpx;"
                ></u--input>
            </view>

            <view class="login-input-item">
                <view class="fs30 mr20">护士用户名</view>
                <u--input
                        placeholder="请输入护士用户名"
                        v-model="loginUser.account"
                        :clearable="true"
                        @blur="loginInfochange"
                        customStyle="background-color: rgba(242,243,247,0.77);border-radius: 20rpx;"
                ></u--input>
            </view>
            <view class="login-input-item" v-if="users && users.length >0">
                <view class="login-user" v-for="(item, index) in users" :key="index" @click="chooseuser(item)">{{item.yhdm}}</view>
            </view>
            <view class="login-input-item">
                <view class="fs30 mr45">护士密码</view>
                <u--input
                        placeholder="请输入护士密码"
                        v-model="loginUser.password"
                        :clearable="true"
                        :password="passwordShow"
                        @blur="loginInfochange"
                        customStyle="background-color: rgba(242,243,247,0.77);border-radius: 20rpx;"
                >
                    <view slot="suffix">
                        <u-icon :name="passwordShow?'/static/login/eye_close.svg':'/static/login/eye_open.svg'"
                                @click="passwordShow = !passwordShow"></u-icon>
                    </view>
                </u--input>
            </view>

            <view class="role-area" @click="rolePickerShow = true">
                <view :class="{'role-text-gray':!role,'role-text-black':role}">{{role?role.displayName:'选择机构'}}</view>
                <u-icon class="arrow" name="arrow-down"></u-icon>
            </view>
            <u-button class="login-area" :disabled="!role" type="primary" text="登录" customStyle="border-radius: 20rpx;" color="#4b8efd" @click="login"></u-button>
        </view>

        <u-picker :show="rolePickerShow" :columns="roles" keyName="displayName" :closeOnClickOverlay="true" @confirm="roleComfirm" @close="rolePickerShow = false" @cancel="rolePickerShow = false"></u-picker>
    </view>
</template>

<script>
    import MethodChannel from '@/api/MethodChannel.js'

    export default {
        components: {},
        data() {
            return {
                loginUser:{
                    account:"",
                    password:"",
                    tenantId:"cszzyzh",//租户 瑞安租户为 rasrmyy
                },
                rolePickerShow:false,
                passwordShow: true,
                role:null,
                roles:[],
                users:[]
            }
        },
        onLoad(option){
            let parames = uni.getStorageSync('loginInfo');
            if (parames) {
                uni.redirectTo({
                    url: '/pages/main/home'
                });
            }
            this.users = uni.getStorageSync('loginUser');
        },
        methods: {
            loginInfochange(){
                if (this.loginUser && this.loginUser.account && this.loginUser.password && this.loginUser.tenantId) {
                    this.myRoles();
                }
            },
            settingClick(){
                MethodChannel.emit("settings")
            },
            chooseuser(item){
                this.loginUser.account = item.yhdm;
                this.loginUser.password = item.pwd;
                this.loginInfochange();
            },
            roleComfirm(item){
                this.role = item.value[0];
                this.rolePickerShow = false;
            },
            // async myRoles() {
            //     let params = {
            //         yhdm: this.loginUser.account,
            //     }
            //     let result = await this.$commonAjaxGet("mobile/user/get/agencys", params);
            //     if (result.res?.Data && result.res?.Data.length >0) {
            //         this.roles = [result.res?.Data];
            //         this.role = result.res?.Data[0];
            //     }else {
            //         this.roles = [];
            //         this.role = null;
            //     }
            // },
            async myRoles() {
                let params = {
                    yhdm: this.loginUser.account,
                    pwd:this.loginUser.password,
                    tenantId:this.loginUser.tenantId,
                }
                let result = await this.$commonAjaxGet("mobile/user/logon/myRoles",params);
                // console.log(result)
                if (result.res?.Data && result.res?.Data.body.length >0) {
                    this.roles = [result.res?.Data.body];
                    this.role = result.res?.Data.body[0];
                }else {
                    this.roles = [];
                    this.role = null;
                }
            },
            async login(){
                let params = {
                    yhdm: this.loginUser.account,
                    pwd: this.loginUser.password,
                    tenantId:this.loginUser.tenantId,//租户
                    jgid: this.role.userRoleDepts?this.role.userRoleDepts.orgId:this.role.orgId,
                    jsonRootBean:this.role,
                }
                this.loginParams(params)
            },
            async loginParams(params){
                let result = await this.$commonAjax("mobile/user/login", params);
                if (result.res.ReType == 0) {
                    this.addUser({
                        yhdm:params.yhdm,
                        pwd:params.pwd
                    });
                    uni.setStorageSync('loginInfo', params);
                    this.$store.commit("setLoginUser", result.res?.Data?.loginUser);
                    this.$store.commit("setArea", result.res?.Data?.Areas);
                    uni.redirectTo({
                        url: '/pages/main/home'
                    });
                }else {
                    uni.removeStorageSync('loginInfo');
                }
            },
            addUser(params) {
                if (!params){
                    return
                }
                let users = uni.getStorageSync('loginUser');
                if (!users){
                    users = [];
                    users.push(params)
                    uni.setStorageSync('loginUser',users);
                    return;
                }

                let userIndex =-1;
                users.find((value,index,arr)=>{
                    if (value.yhdm == params.yhdm){
                        userIndex = index;
                        return true
                    }else {
                        return false
                    }
                })

                if (userIndex != -1){
                    users.splice(userIndex,1)
                    users.unshift(params)
                }else if (users.length < 3){
                    users.unshift(params)
                }else {
                    users.unshift(params)
                    users.pop()
                }
                uni.setStorageSync('loginUser',users);
            }
        },
    }
</script>

<style lang="scss">

    .setting-area {
        margin-top: 50rpx;
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
    }
    .login-area {
        margin-top: 140rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .login-title {
            color: $bs-color-primary;
        }
    }
    .login-input-area {
        width: 100%;
        position: absolute;
        bottom: 0;
        height: 55%;
        background-color: white;
        border-radius: 50rpx 50rpx 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .login-input-item {
            display: flex;
            flex-direction: row;
            width: 90%;
            align-items: center;
            margin-top: 40rpx;
        }

        .login-user {
            background-color: #eff3ff;
            padding: 10rpx 20rpx;
            border-radius: 10rpx;
            font-size: 30rpx;
            margin-right: 20rpx;
        }

        .role-area {
            position: relative;
            width:85%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content:center;
            border: 0.5px solid #dadbde;
            border-radius: 20rpx;
            margin-top: 40rpx;
            padding: 15rpx 20rpx;
            background-color: rgba(242,243,247,0.77);

            .arrow {
                position: absolute;
                right: 0;
                margin-right: 20rpx;
            }

            .role-text-gray {
                margin-left: 20rpx;
                color: $bs-color-grey;
            }

            .role-text-black {
                margin-left: 20rpx;
                color: $bs-color-major;
            }
        }

        .login-area {
            position: absolute;
            bottom: 0;
            width: 85%;
            margin-bottom: 20rpx;
        }
    }

</style>
